<template>
  <div class="shop">
    <header>
      <BaseNavBar title="商家列表"  :is-nav="true"/>
    </header>
    <main class="shop_main">
        <Card  v-for="item in shopList" :key="item?.id " >
            <p class="shop_main_no">商家编号：{{ item?.merchantNo}}</p>
            <p class="shop_main_name">店名：{{ item?.name }}</p>
            <p class="shop_main_address">地址：{{ item?.address }}</p>
            <p class="shop_main_phone">联系电话：{{ item?.telephone }}</p>
            <van-button @click="handleSelectShop(item)" class="shop_main_button" type="primary" round color="#754C29" block>选择此店</van-button>
        </Card>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {showSuccessToast} from 'vant';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { getMerchantList } from '@/apis/merchant.js';

const router = useRouter();
const shopList = ref([]);

const handleSelectShop = (item) => {
    localStorage.setItem('merchantId', item?.id);
    showSuccessToast(`已选${item?.name}`);
    router.push(`/home/menu/${item?.id}`);
};
const init = async() => {
  try {
    const { data={} } = await getMerchantList();
    shopList.value = data?.list;
  } catch (error) {
      console.log(error,'error');

  }
};


onMounted(() => {
  init()
});
</script>

<style lang="less" scoped>
.shop{
  &_main{
    &_no{
      font-size: 14px;
      color: #666;
    }
    &_name{
      font-size: 14px;
      color: #333;
    }
    &_address{
      font-size: 14px;
      color: #666;
    }
    &_phone{
      font-size: 14px;
      color: #666;
    }
    &_button{
      margin-top: 8px;
      height: 32px;
    }
  }
}
</style>
